

import React, { Component } from 'react'
import { Layout, Tag, Avatar,Button,Menu ,Dropdown,Modal} from "antd"
import {withRouter} from "react-router-dom"
import { request } from '../../api';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    LogoutOutlined,
    DownOutlined,
    ExclamationCircleOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import mobxdata from "../../mobx/data.js"
import {connect} from "react-redux"
import { baseURL } from '../../api/ajax';
import { observer } from 'mobx-react'
import "./index.scss"
import { roleList } from '../../utils/index.js';
import { changecollapsed } from '../../redux/actions';
const { Header } = Layout

@connect(
    state=>{
        return {
            title:state.getIn(['data','title']),
            collapsed:state.getIn(['data','collapsed']),
        }
    }
)
@withRouter
@observer
class MyHead extends Component {
   state={
       flag:1
   }
    toggle = () => {
        this.props.dispatch(changecollapsed(!this.props.collapsed))
    }
    componentDidMount(){
        request.getuserinfo()
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo(res.result)   // 存储到mobx 全局变量 
            }else if(res.code==3000){
                this.props.history.push("/login")
            }
        })
    }
    handleLagout=()=>{
        Modal.confirm({
            title: 'Confirm',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要退出登录吗?',
            okText: '确认',
            cancelText: '取消',
            onOk:()=>{
                console.log(this.props)
                // this.props.history.push("/login")
                this.props.history.push("/login")    // 浏览器自带的 
                mobxdata.resetuserinfo()   // 清空userinfo
                localStorage.removeItem('token')
            }
        });
    }
    uploadFile=()=>{
        this.file.click()
    }
    startSendFile=()=>{
        console.log("send-File")
        var file = this.file.files[0]
        console.log(file)
        var data = new FormData()
        data.append("avatar",file)

        request.uploadavatar(data)
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo({
                    avatar:res.avatar
               
                })
                this.setState({
                    falg:!this.state.flag
                })
            }
        })

    }
    render() {
        const { userinfo } = mobxdata
        return (
            <Header style={{ background: "#fff", width: '100%' }}>
                <div className="head-box">
                    <p>
                        {React.createElement(this.props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </p>
                    <marquee behavior="" direction="">  {this.props.title} </marquee>
                    {
                        userinfo.username && <div className="head-right">
                              <Dropdown style={{margin:"0 5px"}} overlay={
                                <Menu>
                                    <Menu.Item >个人信息</Menu.Item>
                                    <Menu.Item danger>修改密码</Menu.Item>
                                </Menu>
                            }>
                                     <span style={{ margin: "0 5px" }}> {userinfo.username}  <DownOutlined /></span>
                            </Dropdown>
                            <input type="file" onChange={this.startSendFile} ref={el=>this.file=el} style={{display:'none'}}  />
                            <Tag color={roleList.find(item => item.role == userinfo.role).color} style={{ margin: "0 5px" }}> {roleList.find(item => item.role == userinfo.role).title}  </Tag>
                            {
                                userinfo.avatar?
                                <Avatar onClick={this.uploadFile}  style={{ margin:"0 5px",cursor:'pointer' }} src={userinfo.avatar.replace(/public/,baseURL)} />
                                :
                                <Avatar onClick={this.uploadFile} style={{ backgroundColor: '#87d068',margin:"0 5px",cursor:'pointer' }} icon={<UserOutlined />} />
                            }
                      <Button style={{margin:"0 5px"}} type="danger" size="mini" 
                                shape="circle" icon={<LogoutOutlined /> } 
                                onClick={this.handleLagout}
                            ></Button>
                        </div>
                    }
                  
                </div>
            </Header>
        )
    }
}

export default MyHead